<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
{include file="system@block/layui" /}

<div id="box">
<el-form ref="form" :model="form" label-width="80px"  :inline="true">
<div>
  <el-form-item label="订单编号">
  {{form.sn}}
      <!-- <el-input v-model="form.sn" :disabled="true"></el-input> -->

  </el-form-item>
  <el-form-item label="会员">
     <el-select v-model="form.user_id" placeholder="请选择会员" :disabled="true">
      <el-option v-for="item,idx in users" :key="idx" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
<el-form-item label="房间">
     <el-select v-model="form.room_id" placeholder="请选择房间">
      <el-option v-for="item,idx in rooms" :key="idx" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </el-form-item>

 <el-form-item label="收银备注">
<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="form.remarks">
</el-input>
</el-form-item>
 <el-form-item label="皮肤现状">
<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="form.skin_text">
</el-input>
</el-form-item>
 <el-form-item label="需要解决的问题">
<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="form.problem">
</el-input>
</el-form-item>
 <el-form-item label="操作注意细节">
<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="form.operate_detail">
</el-input>
</el-form-item>
 <el-form-item label="建议居家用品">
<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="form.sug_goods">
</el-input>
</el-form-item>
  <el-form-item label="审核顾问">
     <el-select v-model="form.adviser_id" placeholder="请选择顾问">
      <el-option v-for="item in advisers" :key='item.id' :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-card class="box-card">
	  <div slot="header" class="clearfix">
	    <span>会员详情</span>
	  </div>
	  <div class="text item">
	    	用户会员卡：￥{{userBalance}} 元
	  </div>
    <div class="text item">
        用户会员卡赠送金额：￥{{userBalanceZeng}} 元
    </div>
	  <div class="text item">
	    	用户疗程卡：
	    	<div v-for="item,idx in userCards" :key="idx" style="margin-left: 20px">
	    		{{ idx + 1 }}.{{item.name}} ：<span v-for="val,key in item.project">{{ val.name }} * {{val.num}} &emsp;</span>
	    	</div>
	  </div>
	</el-card>
</div>
<div>
 <el-button type="success" @click="addPro">增加项目</el-button>
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="项目名称"
      width="180">
      <template slot-scope="scope">
            <el-select v-model="scope.row.project_id" filterable  @change="proSelect(scope.$index)" placeholder="请选择项目">
                  <el-option v-for="item,idx in projects" :label="item.name" :value="item.project_id" :key="idx"></el-option>
            </el-select>
      </template>
    </el-table-column>

    <el-table-column
      label="数量"
      width="150">
      <template slot-scope="scope">
       <el-input-number v-model="scope.row.num" size="small"  @change="setProductPrice(scope.row, $event)"></el-input-number>
      </template>
    </el-table-column>

    <el-table-column
      label="金额">
      <template slot-scope="scope">
        <el-input v-model="scope.row.price"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="是否赠送"
      width="100">
      <template slot-scope="scope">
            <el-select v-model="scope.row.is_give" placeholder="请选择项目" >
                  <el-option label="否" key="1" :value="1"></el-option>
                  <el-option label="是" key="2" :value="2"></el-option>
            </el-select>
      </template>
    </el-table-column>
      <el-table-column label="顾问">
  <template slot-scope="scope">
     <el-select v-model="scope.row.adviser_id" placeholder="请选择顾问">
      <el-option v-for="item,idx in advisers" :key="idx" :label="item.nick" :value="item.id"></el-option>
    </el-select>
    </template>
  </el-table-column>
   <el-table-column label="美容师">
  <template slot-scope="scope">
      <el-select v-model="scope.row.technician_ids" multiple placeholder="请选择美容师">
    <el-option
    v-for="item in technicians"
    :key="item.id"
    :label="item.nick"
    :value="item.id">
    </el-option>
  </el-select>
    </template>
  </el-table-column>
     <el-table-column
      label="手工">
      <template slot-scope="scope">
       <!-- <el-input v-model="scope.row.shougong" @blur="shougongChange(scope.row.shougong, scope.$index)"></el-input> -->
       <el-input-number v-model="scope.row.shougong" size="mini" controls-position="right" @blur="shougongChange(scope.row.shougong,scope.$index)" :min="0" :precision="2" :step="1"></el-input-number>
      </template>
    </el-table-column>
    <el-table-column
      label="备注">
      <template slot-scope="scope">
       <el-input v-model="scope.row.bak"></el-input>
      </template>
    </el-table-column>

    <el-table-column
      label="操作">
      <template slot-scope="scope">
       <el-button @click.prevent="removeItem(scope.$index)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>




<el-form-item>
    <el-button type="primary" @click="onSubmit">移交库管</el-button>
    <el-button>取消</el-button>
  </el-form-item>

  </div>
</el-form>
</div>


<script>
var mv = new Vue({
    el:"#box",
    data:{
      userBalance:{$userBalance},
		userBalanceZeng:{$userBalanceZeng},
        userCards:{:json_encode($userCards)},
        form:{
            sn:"{$formData.sn}",
            user_id: {$formData.user_id},
            room_id: {$formData.room_id},
            remarks: "{$formData['remarks']}",
            skin_text:'{$formData['skin_text']}',
            problem:'{$formData['problem']}',
            operate_detail:'{$formData['operate_detail']}',
            sug_goods:'{$formData['sug_goods']}',
            adviser_id:{$formData.adviser_id},
            id:{$formData.id},
        },
        tableData:[],
        users:{:json_encode($users)},
        rooms:{:json_encode($rooms)},
        advisers:{:json_encode($advisers)},
        technicians:{:json_encode($technicians)},
        projects:{:json_encode($projects)},
        cashiers:{:json_encode($cashiers)},

        project_data:{:json_encode($project_data)},
        defaultProject:[],
    },
    created(){
        this.defaultProject = this.projects[0];
        for(var i = 0; i< this.project_data.length;i++){
            this.tableData.push({
                project_id:Number(this.project_data[i].project_id),
                project_name:this.project_data[i].project_name,
                price: this.project_data[i].price,
                num: this.project_data[i].num,
                is_give: Number(this.project_data[i].is_give),
                settlement: this.project_data[i].settlement,
                type: this.project_data[i].type,
                shougong: this.project_data[i].shougong,
                bak: this.project_data[i].bak,
                adviser_id: Number(this.project_data[i].adviser_id),
                technician_ids: this.project_data[i].technician_ids.map(x => Number(x)),
            })
        }
    },
    methods:{
        proSelect:function(idx){
            var that = this;

            let row = that.projects.filter(function(p){
                 return p.project_id === that.tableData[idx].project_id;
             })[0];
            console.log(row)
           Object.keys(row).map(key => {

              if (key !== 'project_id') {
                that.$set(that.tableData[idx], key, row[key])
              }
            })

        },
        removeItem:function(idx){
            this.tableData.splice(idx,1);
        },
        addPro:function(){
            this.tableData.push({
                project_id:this.defaultProject.project_id,
                project_name:this.defaultProject.project_name,
                price: this.defaultProject.price,
                num:1,
                is_give: 1,
                settlement:1,
                type:1,
                shougong:0,
            });
        },
        onSubmit:function(){
            // this.form.appointment_time.getTime()/1000;
            console.log(this.form);
            // return ;
            var params = this.form;
            params.project_data = this.tableData;
            var that = this;
                axios.post('{:url('')}', params).then(function (response) {
                    if(response.data.status === true){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        that.$message({
                            type: 'success',
                            message: response.data.message,
                            onClose: function(){
                                parent.layer.close(index); //再执行关闭
                                window.parent.location.reload();
                            }
                        })
                    }else{
                        that.$message({
                            type: 'error',
                            message: response.data.message
                        })
                    }
                }).catch(function (error) {
                    that.$message({
                            type: 'error',
                            message: error
                        })
                });
        },
        setProductPrice(item, num) {
            item.price = (((item.price||0)  / (item.old_number||1)) * num).toFixed(2)
            item.old_number = num
        },
        shougongChange:function(shougong, idx){
            console.log(shougong)
            // 修改问题
            // 手工能不能做成必填项，如果是零就填0，不是必选项，会有遗漏
            if(shougong == undefined){
                this.tableData[idx].shougong = 0;
            }
        }
    }
})
</script>
